<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="480" height="400"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Style and Font
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = '18px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Parameters and Coordinates based on the image proportions
    const a = 70;
    const R = a * Math.sqrt(3); // Based on problem text R = sqrt(3)a, and geometry tan(60)=sqrt(3)
    const len2x = 240;
    const angle_rad = Math.PI / 3; // 60 degrees

    const y_center = 170;
    const x_S = 50;
    const x_AB = x_S + a;
    const x_CD = x_AB + len2x;
    const x_S_prime = x_CD + a;
    const x_Q_end = x_S_prime + 40;

    const S = { x: x_S, y: y_center };
    const B = { x: x_AB, y: y_center - R };
    const A = { x: x_AB, y: y_center + R };
    const C = { x: x_CD, y: y_center - R };
    const D = { x: x_CD, y: y_center + R };
    const P = { x: x_CD, y: y_center };
    const S_prime = { x: x_S_prime, y: y_center };
    const Q_axis_end = { x: x_Q_end, y: y_center };

    // --- Draw Diagram ---

    // 1. Main Axis (dashed)
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.setLineDash([5, 5]);
    ctx.moveTo(S.x, S.y);
    ctx.lineTo(Q_axis_end.x, Q_axis_end.y);
    ctx.stroke();
    ctx.setLineDash([]);

    // 2. Cylinder ABCD
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeRect(A.x, B.y, len2x, A.y - B.y);

    // 3. Light Cone from S
    ctx.beginPath();
    ctx.moveTo(S.x, S.y);
    ctx.lineTo(B.x, B.y);
    ctx.moveTo(S.x, S.y);
    ctx.lineTo(A.x, A.y);
    ctx.stroke();

    // 4. Points S, P, S'
    ctx.beginPath(); ctx.arc(S.x, S.y, 3, 0, 2 * Math.PI); ctx.fill();
    ctx.beginPath(); ctx.arc(P.x, P.y, 3, 0, 2 * Math.PI); ctx.fill();
    ctx.beginPath(); ctx.arc(S_prime.x, S_prime.y, 3, 0, 2 * Math.PI); ctx.fill();

    // 5. Labels
    ctx.textAlign = 'right'; ctx.fillText('S', S.x - 10, S.y);
    ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
    ctx.fillText('B', B.x, B.y - 8);
    ctx.fillText('C', C.x, C.y - 8);
    ctx.fillText("S'", S_prime.x, S_prime.y - 10);
    ctx.textBaseline = 'top';
    ctx.fillText('A', A.x, A.y + 8);
    ctx.fillText('D', D.x, D.y + 8);
    ctx.fillText('Q', Q_axis_end.x, Q_axis_end.y + 10);
    ctx.textAlign = 'right'; ctx.fillText('P', P.x - 5, P.y + 10);
    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';

    // 6. Angle θ₀
    ctx.lineWidth = 1;
    const arcRadius = 30;
    ctx.beginPath(); ctx.arc(S.x, S.y, arcRadius, -angle_rad, 0); ctx.stroke();
    ctx.beginPath(); ctx.arc(S.x, S.y, arcRadius, 0, angle_rad); ctx.stroke();
    ctx.fillText('θ₀', S.x + arcRadius * 0.75, S.y - 15);
    ctx.fillText('θ₀', S.x + arcRadius * 0.75, S.y + 15);

    // 7. Vertical Arrow (representing radius)
    ctx.beginPath();
    ctx.lineWidth = 1.5;
    const arrow_x = x_AB + 50;
    const arrow_y1 = y_center;
    const arrow_y2 = B.y + 30;
    ctx.moveTo(arrow_x, arrow_y1); ctx.lineTo(arrow_x, arrow_y2);
    // Arrowhead
    ctx.moveTo(arrow_x - 5, arrow_y2 + 8); ctx.lineTo(arrow_x, arrow_y2); ctx.lineTo(arrow_x + 5, arrow_y2 + 8);
    ctx.stroke();

    // 8. Dimension Lines
    const dim_y = A.y + 40;
    const tick_h = 5;
    const arrow_size = 5;
    ctx.lineWidth = 1;
    ctx.font = '16px Arial';
    ctx.textBaseline = 'bottom';

    function drawDimension(x1, x2, label) {
        ctx.beginPath();
        // Ticks (vertical bars at the ends)
        ctx.moveTo(x1, dim_y - tick_h); ctx.lineTo(x1, dim_y + tick_h);
        ctx.moveTo(x2, dim_y - tick_h); ctx.lineTo(x2, dim_y + tick_h);
        // Horizontal line
        ctx.moveTo(x1, dim_y); ctx.lineTo(x2, dim_y);
        // Arrows (pointing inwards)
        ctx.moveTo(x1 + arrow_size, dim_y - arrow_size); ctx.lineTo(x1, dim_y); ctx.lineTo(x1 + arrow_size, dim_y + arrow_size);
        ctx.moveTo(x2 - arrow_size, dim_y - arrow_size); ctx.lineTo(x2, dim_y); ctx.lineTo(x2 - arrow_size, dim_y + arrow_size);
        ctx.stroke();
        ctx.fillText(label, (x1 + x2) / 2, dim_y - 4);
    }

    drawDimension(S.x, A.x, 'a');
    drawDimension(A.x, D.x, '2x');
    drawDimension(D.x, S_prime.x, 'a');

</script>
</body>
</html>